﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>切换效果</title>
<style type="text/css">
<!--
li{
	color:blue;
	font-size:16px;
	margin:0px;
	padding:5px;
	height: 30px;
	width: 100px;
	text-align: center;
	line-height: 30px;
	list-style-type: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #009;
	border-right-color: #009;
	border-bottom-color: #009;
	border-left-color: #009;
}
.top {
	border: 1px solid #006;
}
.highlight{
	background-color:#FFFF00;
	font-weight: bold;
	color: #906;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">

$(function(){
	$("li").click(function(){
		//点击的时候不断切换
		$(this).toggleClass("highlight");//this获取当前点击的class

		//toggleClass 该方法检查每个元素中指定的类。如果不存在则添加类，
		//如果已设置则删除之。这就是所谓的切换效果。
	
	});
});
</script>
</head>
<body>
<ul>
  <li class="top">新闻</li>
  <li>娱乐</li>
  <li>体育</li>
  <li>理财</li>
  <li>育儿</li>
  <li>汽车</li>
</ul>
</body>
</html>